<template>
    <div class="user-data">
        <div class="sizer" ref="sizer">
            <div class="item">
                <el-select v-model="area_id" placeholder="选择区" @change="getStreet" clearable filterable>
                    <el-option
                    v-for="item in areaData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="item">
                <el-select v-model="street_id" placeholder="选择镇/街道" @change="getSchool" clearable filterable>
                    <el-option
                    v-for="item in streetData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="item">
                <el-select v-model="school_id" placeholder="选择学校" clearable filterable>
                    <el-option
                    v-for="item in schoolData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="item">
                <el-date-picker
                    v-model="data_value"
                    type="daterange"
                    start-placeholder="起始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
            </div>
            <div class="item"><el-button type="primary" @click="screen">筛选</el-button></div>
            <div class="item"><el-button type="primary" @click="reset">重置</el-button></div>
        </div>
        <main>
            <div class="count"> 
                <ul class="count-l">
                    <li class="item">
                        <div class="title">用户数</div>
                        <div class="inner">
                            <div class="inner-l"><span class="num">{{userData.total_num}}</span></div>
                            <div class="inner-r"><i class="fs4"></i></div>  
                        </div> 
                    </li>  
                    <li class="item">
                        <div class="title">教师</div>
                        <div class="inner">
                            <div class="inner-l"><span class="num">{{userData.teacher_num}}</span></div>
                            <div class="inner-r"><i class="fs5"></i></div>  
                        </div> 
                    </li> 
                    <li class="item">
                        <div class="title">学生</div>
                        <div class="inner">
                            <div class="inner-l"><span class="num">{{userData.student_num}}</span></div>
                            <div class="inner-r"><i class="fs6"></i></div>  
                    </div> 
                    </li> 
                </ul>
                <div class="count-r common_main_inner">
                    <div class="item circle-l">
                        <div class="title">男&nbsp;&nbsp;&nbsp;<span>{{userData.male_num}}</span></div>
                        <div class="data">
                            <el-progress type="circle" :width="282" color="#729DFF" :stroke-width="15" :percentage="userData.male_percent"></el-progress>
                        </div>  
                    </div>
                    <div class="item circle-r">
                        <div class="title">女&nbsp;&nbsp;&nbsp;<span>{{userData.female_num}}</span></div>
                        <div class="data"> 
                            <el-progress type="circle" :width="282" color="#E03BB4" :stroke-width="15" :percentage="userData.female_percent"></el-progress>
                        </div>
                    </div>
                </div>
            </div>
            <div class="active common_main_inner">
                <div class="title-box">
                    <p class="head-title">活跃用户</p>
                </div>
                <div class="tabs">
                    <el-button type="primary" plain v-for="(tab, inx) in active_tabs" :key="inx" v-text="tab.text" :class="{'live' : tab.live}" @click="giveAdvice(inx)">近1天</el-button>
                </div>
                <div class="data">
                    <div :id="active_line" class="line"></div>
                </div>
            </div>
            <div class="platform">
                <div class="content-left common_main_inner">
                    <div>
                        <div class="title-box">
                            <p class="head-title">平台用户数</p>
                        </div>
                        <div class="tabs">
                            <el-button type="primary" plain v-for="(tab, inx) in platformTabs" :key="inx" v-text="tab.text" :class="{'live' : tab.live}" @click="platformAdvice(inx)"></el-button>
                        </div>
                        <div class="data">
                            <div :id="platformLine" class="line"></div>
                        </div>
                    </div>
                </div>
                <div class="content-right common_main_inner">
                    <div class="title-box">
                        <p class="head-title">其他</p>
                    </div>
                    <div class="icon">
                        <i class="fs9"></i>
                    </div>
                    <div class="item">
                        <div class="name">
                            <span>院校</span>
                            <span>{{otherData.school_percent + '%'}}</span>
                        </div>
                        <div class="pro">
                            <el-progress color="#44BE61" :stroke-width="15" :percentage="otherData.school_percent" :show-text="false"></el-progress>
                        </div>
                    </div>
                    <div class="item">
                        <div class="name">
                            <span>教育局</span>
                            <span>{{otherData.department_percent + '%'}}</span>
                        </div>
                        <div class="pro">
                            <el-progress color="#40B4EE" :stroke-width="15" :percentage="otherData.department_percent" :show-text="false"></el-progress>
                        </div>
                    </div>
                    <div class="tips">
                        <p>上方数据为平台接入量</p>
                        <p>数据取自{{otherData.update_time}}</p>
                    </div>
                </div>
            </div>
            <div class="new-user common_main_inner">
                <div class="title-box">
                    <p class="head-title">新增用户</p>
                </div>
                <ul class="list">
                    <li  v-for="(item, index) in newUserData" :key="index">
                        <div class="item">
                            <div class="name"><span>{{item.name.substring(item.name.length-1, item.name.length)}}</span>{{item.name}}</div>
                            <div class="time">{{item.create_time}}</div>
                        </div>
                    </li>
                </ul> 
            </div>
        </main>
    </div>
</template>
<script>
const now = Date.now || function() {  //获取当前时间戳
    return new Date().getTime();
}

export default {
    data() {
        return {
            // 筛选
            area_id: null,
            areaData: [],
            street_id: null,
            streetData: [],
            school_id: null,
            schoolData: [],
            data_value: '',
            // 用户数
            userData: [],
            //活跃用户
            active_text: [],
            active_time: [],
            active_date: new Date().getTime(),
            activeTotal: null,
            activeKey: null,
            activePage: 1,
            activeData: [],
            active_line: 'activ-line',
            active_tabs: [
                {
                    text: '近1天',
                    name: '0',
                    live: false
                },
                {
                    text: '近7天',
                    name: '6',
                    live: false
                },
                {
                    text: '近30天',
                    name: '29',
                    live: true
                }
            ],
            // 平台用户
            platform_text: [],
            platform_time: [],
            platform_date: new Date().getTime(),
            platformTotal: null,
            platformKey: null,
            plaftormPage: 1,
            platformData: [],
            platformLine: 'platform-line',
            platformTabs: [
                {
                    text: '近1天',
                    name: '0',
                    live: false
                },
                {
                    text: '近7天',
                    name: '6',
                    live: false
                },
                {
                    text: '近30天',
                    name: '29',
                    live: true
                }
            ],
            // 其他
            otherData: [],
            // 新增用户
            newUserData: [],
        }
    },
    created() { 
    },
    mounted() {
        this.watchScroll();
        this.getArea();
        this.getUser();        
        this.getActiveUser();
        this.getplatformUser();
        this.getOther();
        this.getNewUser();
    },
    methods: {
        watchScroll() {
            let sizer = document.querySelector('.sizer');
            let scrollHeight = sizer.offsetTop;

            let throttled = this.throttle(() => { /*监听页面滚动事件，控制sizer显示/隐藏*/
                let curScrollTop = 0;
                if(document.documentElement&&document.documentElement.scrollTop){  
                    curScrollTop=document.documentElement.scrollTop;  
                }else if(document.body){  
                    curScrollTop=document.body.scrollTop;  
                }

                if(!sizer) {
                    document.removeEventListener('scroll',()=>{});
                }  
                if(curScrollTop >= scrollHeight) {
                    sizer.classList.add('pf');
                } else {
                    sizer.classList.remove('pf');
                }
            }, 600);

            document.addEventListener('scroll', throttled)
        },
        /**
         * 创建并返回一个像节流阀一样的函数
         * @param {Funtion} func 传入的函数
         * @param {Number} wait 时间间隔 
         * @param {leading: false || trailing: false} options 
         */
        throttle(func, wait, options) {
            let context, args, result;
            let timeout = null;
            let previous = 0;
            if (!options) options = {};
            const later = function() {
            previous = options.leading === false ? 0 : now();
            timeout = null;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
            };
            return function() {
            if (!previous && options.leading === false) previous = now();
            let remaining = wait - (now - previous);
            context = this;
            args = arguments;
            if (remaining <= 0 || remaining > wait) {
                if (timeout) {
                clearTimeout(timeout);
                timeout = null;
                }
                previous = now;
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            } else if (!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }
            return result;
            };
        },
        getSchoolId() { // 获取选中学校的id或全部学校
            let school_data = [];

            if (this.school_id) {
                school_data.push(this.school_id);
            } else {
                if (this.street_id || this.area_id) {
                    this.schoolData.forEach( item => {
                        school_data.push(item.id)
                    });
                } else {
                    school_data = null;
                }
            }

            return school_data;
        },
        getTodayDate(key) {  // 获取开始结束时间
            //获取当前时间
            let date = null;
            if (key) {
                date = new Date(new Date() - 1000 * 60 * 60 * 24 * key);
            } else {
                date = new Date();
            }
            
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }

            let nowDate = year + "-" + month + "-" + day;
            return nowDate;
        },
        // 初始化
        getArea() {
            /*获取地区 */
            const success = res => {
                this.areaData = res.data.children;
            };
            this.$ajax.get("api/level/get_tree", { params: {}, func: { success: success } });
        },
        getStreet(val) {
            this.streetData = [];
            this.street_id = null;

            this.areaData.forEach(item => {
                if (item.id === val) {
                    this.streetData = item.children;
                }
            })

            this.getSchool(val);
        },
        getSchool(val) {
            this.school_id = null;
            this.schoolData = [];

            if (!val) {
                val = this.area_id;
            }

            let params = {
                id: val
            };
            const success = res => {
                this.schoolData = res.data;
            };
            this.$ajax.get("api/level/get_school_by_postionid", {
                params: params,
                func: { success: success }
            });
        },
        // 筛选
        screen() {
            this.getUser();
            this.giveAdvice(-1, 'screen');
            this.platformAdvice(-1, 'screen');
            this.getOther();
            this.getNewUser();
        },
        reset() {
            this.area_id = null;
            this.street_id = null,
            this.streetData = [];
            this.school_id = null;
            this.schoolData = [];
            this.data_value = '';

            this.getUser();
            this.giveAdvice(2);
            this.platformAdvice(2);
            this.getOther();
            this.getNewUser();
        },
        // 用户数
        getUser() {
            let success = ( res => {
                this.userData = res.data;
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })
            let params = {
                platform_id: this.getSchoolId(),
                start_time: this.data_value ? this.data_value[0] : null,
                end_time: this.data_value ? this.data_value[1] : null
            }

            this.$ajax.get('api/bigdata/index_userdata', {params: params, func: {success: success, fail: fail}})
        },                
        // 活跃用户
        getActiveUser(key) {
            let success = ( res => {
                this.activeKey = key ? key : '29';
                this.activeTotal = res.data.total_page;
                this.activePage = 1;
                this.activeData = [
                    {
                        page: 1,
                        data: res.data.data
                    }
                ];
                this.active_text = [];
                this.active_time = [];

                let tempData = res.data.data;

                for (let key in tempData) {
                    this.active_text.push(tempData[key].time_txt);
                    this.active_time.push(tempData[key].time_value);
                }

                this.activeInit();
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })

            let params = {
                start_time: this.data_value ? this.data_value[0] : this.getTodayDate(key ? key : '29'),
                end_time: this.data_value ? this.data_value[1] : this.getTodayDate(),
                page: 1,
                platform_id: this.getSchoolId(),
            }
            this.$ajax.get('api/bigdata/user_activedata', {params: params, func: {success: success, fail: fail}})
        },
        activeInit() {
            let _this = this;
            let activeChart = this.$echarts.init(document.getElementById(this.active_line));

            activeChart.setOption({
                tooltip: {
                    trigger: "axis",
                    formatter: "{b}: {c}"
                },
                grid: {
                    left: 60,
                    right: 60,
                    bottom: 100
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisLabel: {
                        interval: 0,
                        color: "#fff",
                        fontSize: "14",
                        rotate: 45
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#585E88"
                        }
                    },
                    data: _this.active_text
                },
                yAxis: {
                type: "value",
                    axisLabel: {
                        fontSize: "14",
                        color: "#fff"
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                        color: "#585E88"
                        }
                    }
                },
                dataZoom: [                    
                    {
                        type: 'slider',
                        show: true,
                        start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100
                        end: 50,
                        height: 10, // 组件高度
                        xAxisIndex: [0],
                        backgroundColor: '#314062', // 组件的背景颜色
                        borderColor: '#314062', // 组件边框颜色
                        showDataShadow: false, //是否显示数据阴影 默认auto
                        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true           
                        filterMode: 'filter',
                        fillerColor: new _this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            {
                                //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                                //给第一个设置0，第四个设置1，就是垂直渐变
                                offset: 0,
                                color: '#2F81E5'
                            }, 
                            {
                                offset: 1,
                                color: '#2F81E5'
                            }
                        ]),            
                        handleSize: 0, //滑动条的 左右2个滑动条的大小
                        handleColor: '#fff',//h滑动图标的颜色
                        handleStyle: {
                            borderColor: "#fff",
                            borderWidth: "1",
                            shadowBlur: 2,
                            background: "#fff",
                            shadowColor: "#fff",
                        },
                        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    },
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        start: 1,
                        end: 100
                    }
                ],
                series: [
                    {
                        data: _this.active_time,
                        type: "line",
                        smooth: true,
                        itemStyle: {
                            borderColor: "#f7b20a",
                            color: "#f7b20a",
                            borderWidth: 0
                        },
                        lineStyle: {
                            color: "#f7b20a"
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0.9,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#273757' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#FFB708' // 100% 处的颜色
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    }
                ]
            });

            activeChart.on("dataZoom", function(param){
                let opt = activeChart.getOption().dataZoom[0];
                let start = opt.start;
                let end = opt.end;
                let flage = _this.activeTotal - _this.activePage;
                let tiemFlag = new Date().getTime() - _this.active_date;

                if (end > 60 && flage > 0 && tiemFlag > 500) {
                    _this.active_date = new Date().getTime();

                    let success = ( res => {
                        _this.activeData.push({
                            page: res.data.current_page,
                            data: res.data.data
                        });

                        let tLen = _this.active_text.length;
                        _this.active_text = [];
                        _this.active_time = [];

                        _this.activeData.sort(function(a, b) {
                            return a.page - b.page;
                        })                        
                        _this.activeData.forEach( item => {
                            for (let key in item.data) {
                                _this.active_text.push(item.data[key].time_txt);
                                _this.active_time.push(item.data[key].time_value);
                            }
                        })                        

                        let sLen = start * tLen / _this.active_text.length;
                        let eLen = sLen + 100/ Math.floor(_this.active_text.length / 10);


                        activeChart.setOption({
                            dataZoom: [                    
                                {  
                                    start : sLen,
                                    end : eLen,
                                },
                            ],
                            xAxis: {
                                data: _this.active_text
                            },
                            series: [
                                {
                                    data: _this.active_time
                                }
                            ]
                        })
                    });

                    let fail = (res => {
                        _this.$message.error(res.msg);
                    })
                    let params = {
                        start_time: _this.data_value ? _this.data_value[0] : _this.getTodayDate(_this.activeKey ? _this.activeKey : '29'),
                        end_time: _this.data_value ? _this.data_value[1] : _this.getTodayDate(),
                        page: _this.activePage + 1,
                        platform_id: _this.getSchoolId(),
                    }

                    _this.$ajax.get('api/bigdata/user_activedata', {params: params, func: {success: success, fail: fail}})
                    _this.activePage++;
                }
            });
        },
        giveAdvice(inx, key) {
            let flag = '29';

            if (!this.data_value && key == 'screen') {
                inx = 2;
            }

            this.active_tabs.forEach((e, i) => {
                e.live = false;

                if(inx === i && !this.data_value) {
                    e.live = true;
                    flag = e.name;
                }
            })

            this.getActiveUser(flag);
        },
        // 平台用户
        getplatformUser(key) {
            let success = ( res => {
                this.platformKey = key ? key : '29';
                this.platformTotal = res.data.total_page;
                this.plaftormPage = 1;
                this.platformData = [
                    {
                        page: 1,
                        data: res.data.data
                    }
                ];
                this.platform_text = [];
                this.platform_time = [];

                let tempData = res.data.data;

                for (let key in tempData) {
                    this.platform_text.push(tempData[key].time_txt);
                    this.platform_time.push(tempData[key].time_value);
                }

                this.platformInit();
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })

            let params = {
                start_time: this.data_value ? this.data_value[0] : this.getTodayDate(key >= 0 ? key : '29'),
                end_time: this.data_value ? this.data_value[1] : this.getTodayDate(),
                page: 1,
                platform_id: this.getSchoolId(),
            }

            this.$ajax.get('api/bigdata/user_countdata', {params: params, func: {success: success, fail: fail}})
        },
        platformInit() {
            let _this = this;
            let plaftormChart = this.$echarts.init(document.getElementById(_this.platformLine));

            plaftormChart.setOption({
                tooltip: {
                    trigger: "axis",
                    formatter: "{b}: {c}"
                },
                grid: {
                    left: 60,
                    right: 60,
                    bottom: 100
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisLabel: {
                        interval: 0,
                        color: "#fff",
                        fontSize: "14",
                        rotate: 45
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#585E88"
                        }
                    },
                    data: _this.platform_text
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        fontSize: "14",
                        color: "#fff"
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#585E88"
                        }
                    }
                },
                dataZoom: [                    
                    {
                        type: 'slider',
                        show: true,
                        start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100
                        end: 50,
                        height: 10, // 组件高度
                        xAxisIndex: [0],
                        backgroundColor: '#314062', // 组件的背景颜色
                        borderColor: '#314062', // 组件边框颜色
                        showDataShadow: false, //是否显示数据阴影 默认auto
                        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true           
                        filterMode: 'filter',
                        fillerColor: new _this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            {
                                //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                                //给第一个设置0，第四个设置1，就是垂直渐变
                                offset: 0,
                                color: '#2F81E5'
                            }, 
                            {
                                offset: 1,
                                color: '#2F81E5'
                            }
                        ]),            
                        handleSize: 0, //滑动条的 左右2个滑动条的大小
                        handleColor: '#fff',//h滑动图标的颜色
                        handleStyle: {
                            borderColor: "#fff",
                            borderWidth: "1",
                            shadowBlur: 2,
                            background: "#fff",
                            shadowColor: "#fff",
                        },
                        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    },
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        start: 1,
                        end: 100
                    }
                ],
                series: [
                    {
                        data: _this.platform_time,
                        type: "line",
                        smooth: true,
                        itemStyle: {
                            borderColor: "#08DBFF",
                            color: "#08DBFF",
                            borderWidth: 0
                        },
                        lineStyle: {
                            color: "#08DBFF"
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0.9,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#273757' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#08DBFF' // 100% 处的颜色
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    }
                ]
            });

            plaftormChart.on("dataZoom", function(param){
                let opt = plaftormChart.getOption().dataZoom[0];
                let start = opt.start;
                let end = opt.end;
                let flage = _this.platformTotal - _this.plaftormPage;
                let tiemFlag = new Date().getTime() - _this.platform_date;

                if (end > 60 && flage > 0 && tiemFlag > 500) {
                    _this.platform_date = new Date().getTime();

                    let success = ( res => {
                        _this.platformData.push({
                            page: res.data.current_page,
                            data: res.data.data
                        });

                        let tLen = _this.platform_text.length;
                        _this.platform_text = [];
                        _this.platform_time = [];

                        _this.platformData.sort(function(a, b) {
                            return a.page - b.page;
                        })                        
                        _this.platformData.forEach( item => {
                            for (let key in item.data) {
                                _this.platform_text.push(item.data[key].time_txt);
                                _this.platform_time.push(item.data[key].time_value);
                            }
                        })                        

                        let sLen = start * tLen / _this.platform_text.length;
                        let eLen = sLen + 100/ Math.floor(_this.platform_text.length / 10);


                        plaftormChart.setOption({
                            dataZoom: [                    
                                {  
                                    start : sLen,
                                    end : eLen,
                                },
                            ],
                            xAxis: {
                                data: _this.platform_text
                            },
                            series: [
                                {
                                    data: _this.platform_time
                                }
                            ]
                        })
                    });

                    let fail = (res => {
                        _this.$message.error(res.msg);
                    })
                    let params = {
                        start_time: _this.data_value ? _this.data_value[0] : _this.getTodayDate(_this.platformKey ? _this.platformKey : '29'),
                        end_time: _this.data_value ? _this.data_value[1] : _this.getTodayDate(),
                        page: _this.plaftormPage + 1,
                        platform_id: _this.getSchoolId(),
                    }

                    _this.$ajax.get('api/bigdata/user_countdata', {params: params, func: {success: success, fail: fail}})
                    _this.plaftormPage++;
                }
            });
        },
        platformAdvice(inx, key) {
            let flag = '29';

            if (!this.data_value && key == 'screen') {
                inx = 2;
            }

            this.platformTabs.forEach((e,i) => {
                e.live = false;
                if(inx === i && !this.data_value) {
                    e.live = true;
                    flag = e.name;
                }
            })

            this.getplatformUser(flag);
        },
        // 其他
        getOther() {
            let success = ( res => {
                this.otherData = res.data;
                this.otherData.department_percent = parseInt(this.otherData.department_percent);
                this.otherData.school_percent = parseInt(this.otherData.school_percent);
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })
            let params = {
                platform_id: this.getSchoolId(),
                start_time: this.data_value ? this.data_value[0] : null,
                end_time: this.data_value ? this.data_value[1] : null
            }

            this.$ajax.get('api/bigdata/user_platformcount', {params: params, func: {success: success, fail: fail}})
        },
        // 新增用户
        getNewUser() {
            let success = ( res => {
                this.newUserData = res.data;
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })
            let params = {
                platform_id: this.getSchoolId(),
                start_time: this.data_value ? this.data_value[0] : null,
                end_time: this.data_value ? this.data_value[1] : null
            }

            this.$ajax.get('api/bigdata/user_useradd', {params: params, func: {success: success, fail: fail}})
        },
    }
}
</script>
<style lang="scss">
.user-data {
    main {
        .count {
            display: flex;

            .count-l {
                margin-right: 20px;

                .item {
                    width: 430px;
                    padding: 43px 20px;
                    background: #2f69ee;
                    border-radius: 6px;
                    color: #fff;
                    margin-bottom: 10px;
                    box-sizing: border-box;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    &:nth-of-type(2) {
                        background: #b62ee2;
                    }

                    &:nth-of-type(3) {
                        background: #d5a11e;
                    }

                    .title {
                        margin-top: -23px;
                        margin-bottom: 13px;
                        font-size: 16px;                        
                    }

                    .inner {
                        display: flex;
                        margin-bottom: 30px;

                        .inner-l {
                            position: relative;
                            flex: 1;

                            .num {
                                position: absolute;
                                font-size: 40px;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }
                        }

                        .inner-r {
                            flex: 0 0 142px;
                            text-align: center;
                        }
                    }
                }
            }
            .count-r {
                flex: 1;
                background-color: #283656;

                .item {
                    display: inline-block;
                    width: 46%;
                    padding-left: 25px;

                    &:nth-of-type(1) {
                        text-align: right;
                        padding-left: 0;
                        padding-right: 25px;
                    }

                    .title {
                        display: inline-block;
                        width: 282px;
                        font-size: 30px;
                        color: #fff;
                        text-align: center;
                        margin-top: 90px;
                        margin-bottom: 60px;
                    }
                }
            }

            .el-progress--circle svg path:first-of-type {
                stroke: #314062 !important;
            }

            .circle-l .el-progress__text {
                color: #729DFF;
            }

            .circle-r .el-progress__text {
                color: #E03BB4;
            }
        }

        .active {
            position: relative;
            width: 100%;
            height: 620px;
            margin-top: 20px;
            background-color: #283656;
            
            .tabs {
                padding-right: 70px;
                text-align: right;

                button {
                    background: none;
                    border-color: #348efc;
                    color: #348efc;
                    margin: 0;
                    padding: 7px 25px;
                    border-radius: 0;
                    border-right: 0;

                    &:last-child {
                        border-right: 1px solid #348efc;
                    }
                }

                .live {
                    background: #348efc;
                    color: #fff;
                }
            }

            .data {
                height: 500px;
                margin: 0 20px 0 23px;

                .line {
                    max-width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>
